<template>
  <view>
    <view class="flex-col justify-start page">
  <view class="flex-col group_1">
    <view class="flex-col justify-start self-center relative section_10">
      <view class="section_11"></view>
      <text class="font_3 text_6 pos_2">确认修改</text>
    </view>
    <view class="flex-col self-stretch relative section">
      <view class="flex-col self-stretch">
        <view class="flex-row justify-between items-center self-stretch group">
          <view class="flex-col justify-start items-center text-wrapper"><text class="text">9:41</text></view>
          <view class="flex-row">
            <image
              class="image"
              src="https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=cad55fb5749ee5623a1a96ab698bce9d.png"
            />
            <image
              class="image_2 ml-5"
              src="https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=fb69388f4c22e772243c42f5053d9e8d.png"
            />
            <image
              class="image_3 ml-5"
              src="https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=c28f42bb86cfcb4f1dd256257358e0cb.png"
            />
          </view>
        </view>
        <image
          class="self-start image_4 mt-18"
          src="https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=13b46b7e7b64fc55897b2b4a4c890352.png"
        />
      </view>
      <text class="self-start text_2 mt-49">编辑昵称</text>
    </view>
    <view class="flex-col justify-start self-stretch section_2">
      <view class="flex-col section_3">
        <text class="self-start font">请输入新的昵称</text>
        <text class="self-end font_2 mt-14">0/10</text>
      </view>
    </view>
    <view class="flex-col justify-start self-center section_4">
      <view class="flex-col justify-start relative section_5">
        <view class="section_6"></view>
        <text class="font_3 text_4 pos">确认修改</text>
      </view>
    </view>
  </view>
</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      };
    }
  }
</script>

<style lang="scss" scoped>
.ml-5 {
  margin-left: 5px;
}
.mt-49 {
  margin-top: 49px;
}
.page {
  padding-bottom: 208px;
  background-color: #ffffff;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.group_1 {
  padding-bottom: 2px;
  height: 604px;
}
.section_10 {
  margin-top: 552px;
  background-color: #ffe944;
  border-radius: 37px;
  background-image: url('https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=2c958c6490abfc6cf0660d9aee9af86e.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 283px;
}
.section_11 {
  background-image: url('https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=2c958c6490abfc6cf0660d9aee9af86e.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 50px;
}
.font_3 {
  font-size: 18px;
  font-family: Source Han Sans SC;
  line-height: 17px;
  font-weight: 700;
}
.text_6 {
  color: #333333;
}
.pos_2 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.section {
  margin-top: -602px;
  padding: 12px 15px 2px 16.5px;
  background-image: linear-gradient(180deg, #fff8c7 0%, #fff9c800 97.7%);
}
.group {
  padding-left: 4.5px;
}
.text-wrapper {
  padding: 5.5px 0 5px;
  border-radius: 24px;
  width: 54px;
  height: 21px;
}
.text {
  color: #000000;
  font-size: 15px;
  font-family: Alibaba PuHuiTi 2;
  line-height: 10.5px;
}
.image {
  width: 17px;
  height: 11px;
}
.image_2 {
  width: 15px;
  height: 11px;
}
.image_3 {
  width: 24px;
  height: 11px;
}
.image_4 {
  border-radius: 50%;
  width: 26px;
  height: 26px;
}
.text_2 {
  color: #333333;
  font-size: 20px;
  font-family: Source Han Sans SC;
  font-weight: 700;
  line-height: 19px;
}
.section_2 {
  margin: 7px 12.5px 0 10.5px;
  padding: 10px 0 12px;
  background-image: url('https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=e7a8412a55e1e644d62672fbbe9ccbbd.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.section_3 {
  margin-left: 5.5px;
  margin-right: 3.5px;
  padding: 17px 13.5px 21px 14.5px;
  background-image: url('https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=fdb8ab73b4c15417b2905ac283fafa8c.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.font {
  color: #999999;
  font-size: 14px;
  font-family: Source Han Sans SC;
  line-height: 13px;
}
.font_2 {
  color: #999999;
  font-size: 12px;
  font-family: Source Han Sans SC;
  line-height: 11.5px;
}
.section_4 {
  margin-top: 13px;
  padding: 1px 0 2px;
  border-radius: 24px;
  background-image: url('https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=2a70f8cb7c4b6051555552ead599ea6f.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 284px;
}
.section_5 {
  background-color: #fff6d2;
  border-radius: 37px;
  background-image: url('https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=cbcce687cbbb2a89723bc69d629f597e.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 283px;
}
.section_6 {
  background-image: url('https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=cbcce687cbbb2a89723bc69d629f597e.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 50px;
}
.text_4 {
  color: #999999;
}
.pos {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
    
      